#include("head.html")
<div class="container-fluid">
    <div class="row">
        <nav id="left" class="col-md-2 sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a id="nav-link-home" class="nav-link active" href="#/home.html">
                            主页
                        </a>
                    </li>
                </ul>
                <!-- 任务模块 -->
                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span style="padding-left: 5px">任务模块</span>
                </h6>
                <ul class="nav flex-column mb-2">
                    <li class="nav-item">
                        <a class="nav-link" href="#/job-module/jobGroup.html">
                            任务组
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#/job-module/job.html">
                            任务
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#/job-module/jobVariable.html">
                            任务变量
                        </a>
                    </li>
                </ul>
                <!-- 任务管理模块 -->
                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span style="padding-left: 5px">任务管理模块</span>
                </h6>
                <ul class="nav flex-column mb-2">
                    <li class="nav-item">
                        <a class="nav-link" href="#/manage-module/scheduleJob.html">
                            计划任务
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#/manage-module/jobHistory.html">
                            任务历史
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <main id="main" role="main" class="col-md-10 col-md-offset-2">
            #include("home.html")
        </main>
    </div>
</div>
<script>
    $(function () {
        // 上一个点击链接节点
        var lastActiveNode = $('#nav-link-home')
        // 切换侧边栏
        $('#left .nav-item .nav-link').on('click', function () {
            const href = $(this).attr('href')
            // 点击相同链接节点
            if (lastActiveNode.attr('href') === href) {
                return
            }
            //  激活侧边栏链接
            activeNav($(this))
            // 获取页面，并更新
            if (href.startsWith('#/')) {
                const url = href.substring(1)
                $.get(url, function (result) {
                    $("main").html(result)
                })
            }
        })

        // 激活侧边栏链接
        function activeNav(that) {
            lastActiveNode.removeClass('active')
            that.addClass('active')
            lastActiveNode = that
        }
    })
</script>
#include("foot.html")